<template>
  <el-table :data="treeData" row-key="objectId" style="width: 100%">
    <el-table-column label="分类层级">
      <template #default="scope">
        {{ scope.row.parent == '0-0' ? '一级类目' : '' }}
      </template>
    </el-table-column>
    <el-table-column label="分类名称" prop="name" />
    <el-table-column label="是否展示" width="180">
      <template #default="scope">
        <el-switch v-model="scope.row.isShow" inactive-value="2" active-value="1" />
      </template>
    </el-table-column>
    <el-table-column label="分类图标" width="180">
      <template #default="scope">
        <img :src="scope.row.icon" class="h-10" alt="" srcset="" />
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button v-permit size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
// const category = useCategory();
import { categoryGet } from '@/api/job'
export interface CategoryType {
  objectId: string
  name: string
  icon: string
  parent: string
  isShow: string // 1代表可见，2代表不可见
  children?: CategoryType[]
}
const list = ref<Array<CategoryType>>([])
categoryGet().then((res) => {
  list.value = res.data.results
  console.log(res)
})
const treeData = computed<Array<CategoryType>>(() => {
  // 先挑出所有父级
  let parentArr = list.value.filter((item) => item.parent == '0-0')
  // 从category.list中跳出属于对应父级的children
  parentArr.forEach((item) => {
    item.children = list.value.filter((child) => child.parent == item.objectId)
  })
  return parentArr
})

const handleEdit = (index: number, row: CategoryType) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: CategoryType) => {
  console.log(index, row)
}

// 按钮权限控制
</script>
